<template>
    <swiper :options="swiperOption"
            ref="mySwiper">
        <swiper-slide class="swiper-slide"
                      v-for="(item,index) in collocateContentDtos"
                      :key="index"
                      :style="{ backgroundImage:'url('+ item.img+')',backgroundSize:'100%'}"
                      @click.native="goJump(item.imgUrl)">
            <!--          @click.native="goJump(item)" 每一个图片的点击事件-->
            <div class="bs-swiper-bottom">
                <div>{{item.title}}</div>
                <div>{{item.date}}</div>
            </div>

        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</template>

<script>
    import {Swiper, SwiperSlide} from "vue-awesome-swiper";

    components: {
        Swiper, SwiperSlide
    }
    export default {
        name: "imginfo",

        data() {
            return {
                collocateContentDtos: [
                    // {
                    //     img: 'http://localhost:8081/hm/profile/upload/2021/08/28/5e5e2d9b-6e6d-4f48-b236-1b9b64e46458.jpg',
                    //     title: '图片一',
                    //     date: '2020-01-05',
                    // },
                    // {
                    //     img: 'https://img.yzcdn.cn/vant/apple-2.jpg',
                    //     title: '图片一',
                    //     date: '2020-01-05',
                    // },
                    // {
                    //     img: 'https://img.yzcdn.cn/vant/apple-3.jpg',
                    //     title: '图片一',
                    //     date: '2020-01-05',
                    // },
                    // {
                    //     img: 'https://img.yzcdn.cn/vant/apple-4.jpg',
                    //     title: '图片一',
                    //     date: '2020-01-05',
                    // },
                    // {
                    //     img: 'https://img.yzcdn.cn/vant/apple-1.jpg',
                    //     title: '图片一',
                    //     date: '2020-01-05',
                    // },
                    // {
                    //     img: 'https://img.yzcdn.cn/vant/apple-3.jpg',
                    //     title: '图片一',
                    //     date: '2020-01-05',
                    // }
                ],

                swiperOption: {
                    slidesPerView: 4,  //一行显示4个
                    spaceBetween: 10,  //间隔30
                    freeMode: true,
                    speed: 1000,   //滑动速度
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                },

            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
            let _this = this;
            this.$http({
                method: 'get',
                url: '/hm/api?m=getOtherImgInfo'
            }).then(function (res) {
                _this.collocateContentDtos = res.data;
                console.log(_this.collocateContentDtos)
            }).catch(function (err) {
                console.log(err);
            })
            console.log('Current Swiper instance object', this.swiper)
        },
        methods: {
            goJump(imgUrl) {
                window.open(imgUrl, '_blank');
            }
        }
    }
</script>

<style scoped>
    .swiper-container {
        width: 100%;
        padding: 0 5px;
    }

    .swiper-slide {
        width: 50%;
        height: 150px;
        position: relative;
    }

    .bs-swiper-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20px;
        background-color: rgba(65, 105, 225, 0.7);
        color: #fff;
        font-size: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>